<template>
  <Modal v-model="modal" title="编辑渠道" @on-cancel="canceledit" :width="1000">
    <Select
      v-model="params.project_id"
      v-width="200"
      placeholder="请选择项目"
      @on-change="getchannel"
    >
      <Option
        :value="item.value"
        v-for="item in projectList"
        :key="item.value"
        >{{ item.label }}</Option
      >
    </Select>
    <div style="max-height: 600px;overflow-y: auto;">
      <template v-if="bool">
        <div
          v-for="(item, index) in data[params.project_id]"
          class="ivu-mb-8 ivu-mt-8"
          :key="index"
        >
          <div>
            <Checkbox
              :disabled="item.disabel"
              :indeterminate="item.indeterminate"
              :value="item.selected"
              @click.prevent.native="handleCheckAll(item)"
              >{{ item.source_name }}</Checkbox
            >
          </div>
          <CheckboxGroup
            v-model="item.checkAllGroup"
            @on-change="checkAllGroupChange(item)"
          >
            <Checkbox
              :disabled="items.disabel"
              :label="items.id"
              v-for="(items, indexs) in item.children"
              :key="indexs"
              >{{ items.source_name }}</Checkbox
            >
          </CheckboxGroup>
        </div>
      </template>
    </div>
    <div slot="footer">
      <Button @click="canceledit">取消</Button>
      <Button @click="submitedit" type="primary">确认</Button>
    </div>
  </Modal>
</template>

<script>
import {
  netsettingchannellist,
  netsettingbindchannel,
  netsettingprojectlist,
} from "@/api/hqapi";
export default {
  name: "Channel",
  data() {
    return {
      modal: false,
      params: { id: "", channel_id: "", project_id: "" },
      data: {},
      indeterminate: false,
      checkAll: false,
      checkAllGroup: [],
      projectList: [],
      bool: true,
      timer: null,
    };
  },
  methods: {
    initial(row) {
      // console.log(row,'row')
      this.params.id = row.id;
      netsettingprojectlist({ id: row.id }).then((res) => {
        this.projectList = res.filter((item) => item.selected === true);
        this.params.project_id = this.projectList[0]
          ? this.projectList[0].value
          : "";
        this.getchannel();
      });
    },
    getchannel() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        if (!this.data[this.params.project_id]) {
          this.bool = false;
          netsettingchannellist({
            id: this.params.id,
            project_id: this.params.project_id,
          }).then((res) => {
            for (let item of res) {
              if (item.children) {
                for (let items of item.children) {
                  if (items.disabel) item.disabel = true;
                }
              }
            }
            this.$set(this.data, `${this.params.project_id}`, res);
            this.bool = true;
            this.modal = true;
          });
        }
      }, 100);
    },
    handleCheckAll(item) {
      console.log(item);
      if (item.indeterminate) {
        item.selected = false;
      } else {
        item.selected = !item.selected;
      }
      item.indeterminate = false;

      if (item.selected) {
        item.checkAllGroup = [];
        item.children.forEach((items) => {
          item.checkAllGroup.push(items.id);
        });
      } else {
        item.checkAllGroup = [];
      }
      this.$forceUpdate();
    },
    checkAllGroupChange(item) {
      if (item.checkAllGroup.length === item.children.length) {
        item.indeterminate = false;
        item.selected = true;
      } else if (item.checkAllGroup.length > 0) {
        item.indeterminate = true;
        item.selected = false;
      } else {
        item.indeterminate = false;
        item.selected = false;
      }
    },
    canceledit() {
      this.data = {};
      this.modal = false;
    },
    submitedit() {
      let data = Object.keys(this.data);
      if (data.length > 0) {
        let datas = { id: this.params.id };
        data.forEach((item) => {
          this.$set(datas, `${item}`, "");
          let channel_id = [];
          this.data[item].forEach((items) => {
            channel_id.push(...items.checkAllGroup);
          });
          datas[item] = channel_id.join(",");
        });
        netsettingbindchannel(datas).then((res) => {
          this.$Message.success("绑定渠道成功");
          this.$emit("askData");
          this.data = {};
          this.modal = false;
        });
      } else {
        this.$Message.error("请选择项目");
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
